<template>
	<uv-popup ref="popupRef" mode="bottom" round="20rpx" :closeOnClickOverlay="false" closeable @change="change">
		<view class="withdrawal-pwd-box">
			<view class="withdrawal-pwd-title">提现明细</view>
			<view class="withdrawal-pwd-item">
				<text>提现金额</text>
				<text>{{dataInfo.outAcctAmount}}</text>
			</view>
			<view class="withdrawal-pwd-item">
				<text>{{dataInfo.isPublic == '0' ? '提现单笔手续费' : '提现手续费'}}</text>
				<text>{{formatPayFee()}}</text>
			</view>
			<view class="withdrawal-pwd-item">
				<text>考核扣款</text>
				<text>{{dataInfo.deductAmount}}</text>
			</view>
			<view class="withdrawal-pwd-item" v-if="dataInfo.isPublic == '0'">
				<text>发票税差</text>
				<text>{{dataInfo.taxFee}}</text>
			</view>
			<view class="withdrawal-pwd-item">
				<text>实际到账</text>
				<text>{{dataInfo.payAmount}}</text>
			</view>
			<!-- 需要发送验证码 -->
			<view class="withdrawal-pwd-sms-box" v-if="dataInfo.selfMark != '1'">
				<view class="withdrawal-pwd-item">
					<text>手机号</text>
					<text>{{userStore.hidePhone}}</text>
				</view>
				<xh-input placeholder="请输入验证码" padding="0" v-model="code">
					<template #right>
						<text class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="startSendSms">{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}</text>
					</template>
				</xh-input>
			</view>
			<view class="withdrawal-paypwd-title">请输入6位支付密码</view>
			<view class="withdrawal-paypwd-box">
				<uv-code-input :maxlength="6" dot v-model="payPassword"></uv-code-input>
			</view>
			<view class="submit-btn" @tap="submit">确认</view>

		</view>
	</uv-popup>
</template>

<script setup>
	import { ref, onUnmounted } from 'vue'
	import { useUserStore } from '@/common/stores'
	import { totalSeconds } from '@/common/config/config.js'
	import { sendCaptcha, submitWithdrawOrder } from '@/common/api/api.js'
	const userStore = useUserStore()
	const popupRef = ref(null)
	const payPassword = ref('')
	// 验证码
	const code = ref('')
	const dataInfo = ref({
		isPublic: '1',
	})
	//是否开始倒计时
	const isStartTime = ref(false)
	// 倒计时秒数
	const seconds = ref(totalSeconds)
	//计时器
	let timer = null
	const open = (params) => {
		payPassword.value = ''
		code.value = ''
		console.log('提现参数：', params)
		dataInfo.value = params
		if (dataInfo.value.selfMark != '1') {
			startSendSms()
		}
		popupRef.value.open()
	}
	const close = () => {
		popupRef.value.close()
	}
	const formatPayFee = () => {
		return dataInfo.value.isPublic == '0' ? dataInfo.value.payFee : `${dataInfo.value.outAcctAmount}*${dataInfo.value.taxPoint}%+${dataInfo.value.payFee}`
	}
	// 发送验证码
	const startSendSms = async () => {
		if (isStartTime.value) {
			return
		}
		let params = {}
		params.phoneNumber = userStore.user.tel
		params.smsType = 'WITHDRAW'
		await sendCaptcha(params)
		startTimer()
	}
	//开始倒计时
	const startTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = totalSeconds
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	const change = (e) => {
		if (!e.show) {
			if (timer) {
				clearInterval(timer)
				timer = null
				isStartTime.value = false
			}
		}
	}

	// 确认
	const submit = () => {
		if (uni.$uv.test.empty(code.value) && dataInfo.value.selfMark != '1') {
			uni.$utils.showToast('请输入验证码')
			return
		} else if (uni.$uv.test.empty(payPassword.value)) {
			uni.$utils.showToast('请输入6位支付密码')
			return
		}
		let params = JSON.parse(JSON.stringify(dataInfo.value.requestParams)) || {}
		if (dataInfo.value.selfMark != '1') {
			params.smsChkCode = code.value
		}
		params.selfMark = dataInfo.value.selfMark
		params.withdrawPwd = uni.$utils.passwordEncrypt(payPassword.value)
		console.log(params)
		
		submitWithdrawOrder(params).then(res => {
			const dataStr = decodeURIComponent(JSON.stringify({ ...dataInfo.value, ...res.result }))
			uni.redirectTo({
				url: `/pages/wallet/wallet-list/withdrawal/withdrawal-result/withdrawal-result?data=${dataStr}`
			})
			close()
		}).catch(err => {
			close()
		})

	}
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer)
			timer = null
			isStartTime.value = false
		}
	})
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.withdrawal-pwd-box {
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.withdrawal-pwd-title {
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}

		.withdrawal-pwd-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			font-size: 26rpx;

			text:nth-child(2) {
				color: $xh-color-6;
			}
		}

		.withdrawal-paypwd-title {
			padding: 20rpx 0;
			text-align: center;
		}

		.withdrawal-paypwd-box {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
		}

		.bottom-box {
			color: $xh-theme-color;
			font-size: 30rpx;
			text-align: center;
		}

		.code-btn {
			color: $xh-theme-color;
			margin-left: 10rpx;
			font-size: 28rpx;
		}

		.code-btn-select {
			color: #cccccc;
		}
	}
</style>